<template>
   <div>
      <div class="tuwen_box" v-if="propValue.tabIndex==0">
          <div class="title flex">
            <div class="tit_hx">{{propValue.name}}</div>
          </div>
          <div class="tuwen_inner">
             <div v-html="propValue.content"></div>
          </div>
      </div>
         <div class="tuwen_box2" v-else-if="propValue.tabIndex==1">
          <div class="title flex">
            <div class="tit_hx">{{propValue.name}}</div>
          </div>
          <div class="tuwen_inner flex">
            <div  class="imgbox" :style="{width:propValue.imgwidth+'px',height:propValue.imgheight+'px','margin-right':'10px'}">
                <img :src="propValue.img" alt="">
            </div>
             <div v-html="propValue.content"></div>
          </div>
      </div>
       <div class="tuwen_box2" v-else-if="propValue.tabIndex==2||propValue.tabIndex==5">
          <div class="title flex">
            <div class="tit_hx">{{propValue.name}}</div>
          </div>
          <div class="tuwen_inner">
             <div  class="imgbox" >
               <img :src="propValue.img" :align="propValue.tabIndex==2?'left':'right'" :style="{width:propValue.imgwidth+'px',height:propValue.imgheight+'px'}" alt="">
            </div>
             <div v-html="propValue.content"></div>
          </div>
      </div>
        <div class="tuwen_box" v-else-if="propValue.tabIndex==3">
          <div class="title flex">
            <div class="tit_hx">{{propValue.name}}</div>
          </div>
          <div class="tuwen_inner">
             <div  class="imgbox" :style="{width:propValue.imgwidth+'px',height:propValue.imgheight+'px'}">
                <img :src="propValue.img" alt="">
            </div>
             <div v-html="propValue.content"></div>
          </div>
      </div>
        <div class="tuwen_box" v-else-if="propValue.tabIndex==4">
          <div class="title flex">
            <div class="tit_hx">{{propValue.name}}</div>
          </div>
          <div class="tuwen_inner flex">
              <div v-html="propValue.content"></div>
             <div  class="imgbox"  :style="{width:propValue.imgwidth+'px',height:propValue.imgheight+'px'}">
                <img :src="propValue.img" alt="">
            </div>
          </div>
      </div>
        <div class="tuwen_box" v-else-if="propValue.tabIndex==6">
          <div class="title flex">
            <div class="tit_hx">{{propValue.name}}</div>
          </div>
          <div class="tuwen_inner">
              <div v-html="propValue.content"></div>
             <div  class="imgbox" :style="{width:propValue.imgwidth+'px',height:propValue.imgheight+'px','margin-top':'10px'}">
                <img :src="propValue.img" alt="">
            </div>
          </div>
      </div>
      
      <!-- <Upload>ali oss</Upload> -->
          <!-- <div v-if="propValue.img">
            <img src="../assets/title.jpg" alt="">
        </div> -->
        <!-- <div>
            <div>{{propValue.name}}</div>
            <div>{{propValue.tabIndex}}</div>
            <div v-html="propValue.content"></div>
        </div> -->
   </div>
</template>

<script>
// import  Upload  from '../components/Upload/index.vue'
export default {
  // components:{Upload},
 props: {
        propValue: {
            type: Object,
            default: {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            tabIndex:6
            // propValue.tabIndex
        }
    },
}
</script>

<style lang="scss" scoped>
.tuwen_box{
 padding: 10px;
 .tuwen_inner{
    padding: 5px;
    margin-top: 5px;
   .imgbox{
    flex-shrink:0;
   }
    img{
        width: 100%;
        height: 100%;
        display: block;
        margin: auto;
    }
}

}
.tuwen_box2{
 padding: 10px;
.tuwen_inner{
    padding: 5px;
    margin-top: 5px;
     .imgbox{
    flex-shrink:0;
   }
    img{
        display: block;
        width: 100%;
        height: 100%;
        margin-right: 10px;
    }
}

}
.title{
    color: #076ce0;
    font-size: 18px;
    border-bottom: 1px solid #aaa;
    position: relative;
    .tit_hx{
        border-bottom: 3px solid #076ce0;
        padding: 0 4px;
    }
}


// 文字居中
.tuwen_box1 {
    display: flex;
}
// .tuwen_box {
//     height: 100%;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     img {
//         margin-right: 20px;
//     }
// }
// .tuwen_box {
//     height: 100%;
//     img {
//         margin: 10px;
//         float: left;
//     }
// }
// 图上文字下
// .tuwen_box {
//     height: 100%;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     flex-direction: column;
// }
//左文右图
// .tuwen_box {
//     height: 100%;
//     display: flex;
//     flex-direction: row-reverse;
//     justify-content: center;
//     align-items: center;
//     img {
//         margin-left: 20px;
//     }
// }
// //文字环绕 图在右上
// .tuwen_box {
//     height: 100%;
//     img {
//         margin: 10px;
//         float: right;
//     }
// }
// // 上文下图
// .tuwen_box {
//     height: 100%;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     flex-direction: column-reverse;
// }
</style>
